<template>
  <div class="page-box">
    <div class="box-nav">
      <van-icon name="arrow-left" size="0.5rem" />
      选择地址
      <van-icon name="plus" size="0.5rem" @click="addAddress" />
    </div>
    <van-address-edit
    :area-list="areaList"
    show-postal
    show-delete
    show-set-default
    show-search-result
    :search-result="searchResult"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
    value=""
    v-if="isShow"
    />
    <ul class="addr-list">
      <li>
        <div class="addr-info-body">
          <div class="addr-name">
            蒋经理 12345678910
          </div>
          <div>重庆 重庆市 九龙坡区 石桥铺科园一路3号渝高大厦9楼</div>
        </div>
        <van-icon name="edit" size="0.4rem" @click="reAddress"/>
      </li>
    </ul>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';

export default {
  data() {
    return {
      areaList,
      searchResult: [],
      isShow:false
    };
  },
  methods: {
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '千锋教育',
            address: '石桥铺科园一路3号渝高大厦9楼',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    addAddress(){
      this.isShow=!this.isShow
    },
    reAddress(){
      this.isShow=true
    }
  },
};
</script>

<style src="../assets/css/addressadd.css" scoped>
</style>